<template>
  <div>
    <!-- 头部导航 -->
    <Nav>
      <div class="box">
        <span>昵称:{{ $store.state.shop.msg }} </span>
        <span>许愿墙</span>
      </div>
    </Nav>
    <!-- 输入框部分 -->
    <Input v-model="dream" type="text"/>
    <Color @sendimg="getcolor"/>
    <button :disabled="disabled" @click="addDream">{{msg}}</button>
       <!-- 渲染卡片 -->
    <div class="wsc_dream_box">
      <ul>
        <li
          v-for="(item, i) in dreamList"
          :key="item.id"
          :style="{
            background: item.color.bgc,
            top: item.top,
            left: item.left,
          }"
          @touchstart="Touchstart($event, i)"
          @touchmove="Touchmove($event, i)"
          @touchend="Touchend"
        >
          {{ item.content }}
          <span class="remove" @click="remove(i)">x</span>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import Color from "../components/color";
import Nav from "../components/nav";
import Input from "../components/input";
export default {
  components: {
    Nav,
    Input,
    Color,
  },
  data() {
    return {
        msg: "在想想",
      disabled: true,
      dream: "",
      color: "",
      dreamList: JSON.parse(localStorage.getItem("key")) || [],
      startX: 0,
      startY: 0,
    };
  },
  methods: {
    checkClick() {
      if (this.dream && this.color) {
        this.disabled = false;
        this.msg = "许愿";
      } else {
        this.disabled = true;
        this.msg = "在想想";
      }
    },
    getcolor(color) {
      this.color = color;
      this.checkClick();
    },
    // 添加愿望
    addDream() {
      const obj = {
        content: this.dream,
        color: this.color,
        left: Math.random() * 375 + "px",
        top: Math.random() * 400 + "px",
        id: new Date().getTime(), //时间戳
      };
      // 大于6条数据不能添加
      if (this.dreamList.length < 6) {
        this.dreamList.push(obj);
      } else {
        this.$loading.show("最多只能添加6个愿望");
        setTimeout(() => {
          this.$loading.hide();
        }, 2000);
      }
      this.dream = "";
      this.disabled = true;
    },
    // 拖拽
    Touchstart(e, i) {
      this.startX = e.touches[0].pageX - parseInt(this.dreamList[i].left);
      this.startY = e.touches[0].pageY - parseInt(this.dreamList[i].top);
    },
    // 随机位置
    Touchmove(e, i) {
      this.dreamList[i].left = e.touches[0].pageX - this.startX + "px";
      this.dreamList[i].top = e.touches[0].pageY - this.startY + "px";
    },
    Touchend() {
      localStorage.setItem("key", JSON.stringify(this.dreamList));
    },
    remove(i) {
      this.dreamList.splice(i, 1);
      localStorage.setItem("key", JSON.stringify(this.dreamList));
    },
  },
    watch: {
    dream() {
      this.checkClick();
    },
  },
};
</script>
<style  scoped>
.box {
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-content: center;
  margin-left: -50px;
}
.wsc_dream_box {
  position: relative;
}

   li {
      width: 80px;
      height: 80px;
      background-repeat: none;
      background-size: 100% 100%;
      background-position: center center;
      font-size: 26px;
      text-align: center;
      line-height: 80px;
      color: #fff;
      position: absolute;

    }
      .remove {
        position: absolute;
        right: 6px;
        top: -30px;
      }
</style>